<template>
	<view class="pay" v-show="showFlag">

		<!-- 顶栏 -->
		<!-- 只能有一个根元素 -->
		<u-sticky offset-top="0" bg-color="#fff">
			<view class="head" ></view>
		</u-sticky>
		<!-- 卡片 -->
		<view class="main_card ">
			<view class="u-relative card0 u-padding-left-30 u-padding-top-48">
				<view class="name u-font-36 u-margin-bottom-22"><h3>{{name}}</h3></view>
				<view class="weizhi u-font-26">{{address}}</view>
			</view>
			<view style="overflow: auto;height: 68vh;">
				<viewData :type="'noData'" :nextPage="!nextPage" :isTab="false" :isData="listData.length < 1" :loading="loading" 
				@onRefresh="onRefresh">
					<view v-if="listData.length == 0">
					  <view style="width: 232px;height: 242px;margin: 110px auto;">
					    <image style="width: 100%;height: 100%;" src="../../static/image/9015d0e9f45344c4007d408cd271f6a.png" mode=""></image>
					  </view>
					  <view style="width: 62%;margin: -66px auto;text-align: center;color: #999;">暂无电费数据</view>
					</view>
					<view class="card2"@click="goToClick(item)" v-for="(item,index) in listData">
						<view style="display: flex;">
							<!-- <h2>水费</h2> -->
							<h2>{{item.wp_nubmer}}</h2>
						</view>
						<view>单价：￥{{item.unitPrice}}</view>
						<view>倍率：{{item.magnification}}</view>
						<view>型号：{{item.wp_model}}</view>
						<view >电表位置：{{item.wp_postion}}</view>
						<view class="u-flex">
							<view class="u-flex-1" >应缴金额：￥<span style="font-size: 19px;font-weight: 550;">{{item.money}}</span>元</view>
							<view class="u-margin-right-30 yjq u-padding-10" >
								{{Number(item.money).toFixed(2)>0?'未结清':'已结清'}}</view>
						</view>
						
					</view>
				</viewData>
			</view>
		</view>
	</view>
</template>
<script>
	import baseApi from '../../api/api.js'
	export default {
		data() {
			return {
				headText:'asdsad',			
				count: 4,
				value: 2,
				name: '',
				address: '',
				showFlag: false,
				payList: {
					costName: '',
					costNum: 0,
					wuyeMoney: 0,
					fujiaMoney: 0,
					weiyueMoney: 0,
					allMoney: 0,
				},
				pageIndex:1,
				loading: false,
				// type: 1,
				nextPage:false,
				listData:[],
				// noDatatext:"暂无电费数据"
			}
		},
		async onShow() {
			this.checkLogin();
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
		},
		onPullDownRefresh() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			this.checkLogin();
		},
		methods: {
			//获取水电表
			getTableList() {
				console.log(this.pageIndex,'pageindex')
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				this.loading = false;
				this.$request.api.getMyTable({
					type:2,////1.水 2.电
					pageIndex: this.pageIndex,
					room_id:this.homelist.roomId
				}).then(res => {
					console.log(res)
					if (this.pageIndex == 1) {
						this.listData = res.data.data.datalist || [];
						console.log(this.listData)
					} else {
						this.listData = [...this.listData, ...res.data.data.datalist];
					}
					console.log(this.listData)
					this.nextPage = res.data.data.isEndPage
					// this.loading = true;
					uni.hideLoading();
				})
				console.log(this.nextPage)
			},
			// 验证是否登录或实名认证
			checkLogin(){
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/pages/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
									_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
							this.getTableList();
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh()
			},
			goToClick(val){
				var item = JSON.stringify(val);
				uni.navigateTo({
					url: '/pages/forwater/forWaterPay?val='+item
				});
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.head {
		height: 184rpx;
		// background-color: #427705;
		background: linear-gradient(to bottom, #427705, #18b566);
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	.card0 {
		height: 220rpx;
		border-radius: 6px;
		box-shadow: 0px 3px 40rpx 0px rgba(0, 0, 0, 0.1);
		top: -100rpx;
		background-color: #fff;
		z-index: 99999;
	}

	.card1 {
		height: auto;
		border-radius: 6px;
		background: linear-gradient(150deg, rgba(246, 179, 82, 1) 0%, rgba(237, 165, 59, 1) 100%);
		box-shadow: 0px 3px 40rpx 0px rgba(249, 168, 50, 0.4);
		padding-top: 40rpx;
		padding-left: 40rpx;

		view {
			margin-bottom: 20rpx;
			color: #fff;
		}
	}

	.card2 {
		// height: 300rpx;
		border-radius: 6px;
		background: linear-gradient(142deg, #42770591 0%, #427705FF 100%);
		box-shadow: 0px 3px 40rpx 0px rgba(51, 51, 51, 0.2);
		margin-top: 46rpx;
		padding: 18px 20px 3px 20px;

		view {
			margin-bottom: 20rpx;
			color: #fff;
		}
	}
	.car2:last-child{
		margin-bottom: 100rpx;
	}

	.main_card {
		padding: 0 30rpx;
	}

	.yjq {
		border: 1px solid #fff;
		border-radius: 6px;
		box-sizing: border-box;
	}
</style>
